<template>
  <div class="wrapper">
    <div class="header">
      {{ title }}
    </div>
    <div class="scroll" ref="scrollContainer">
      <div v-for="(message, index) in currentSession.messages" :key="index">
        <DialogMessageItem :message="message"></DialogMessageItem>
        <div class="clear-context" v-if="clearContextIndex - 1 === index">
          <div class="clear-context-tips">上下文已清除</div>
        </div>
      </div>
    </div>
    <DialogMessageInput @press-enter="addMessage"></DialogMessageInput>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref, watch } from "vue";
import { useRoute } from "vue-router";
import DialogMessageItem from "./DialogMessageItem.vue";
import DialogMessageInput from "./DialogMessageInput.vue";
import { useChatStore } from "@/store/useChatStore";
import { MessageRole } from "@/types/chat";


const route = useRoute();
const chatStore = useChatStore();
const currentSession = chatStore.currentSession();
const clearContextIndex =
  (currentSession.clearContextIndex ?? -1) >= 0
    ? currentSession.clearContextIndex!
    : -1;

const title = "新对话";

const dialogId = ref(+route.params.id);
watch(
  () => route.params.id,
  (newId: any) => {
    dialogId.value = newId;
    getMessages();
  }
);

const getMessages = () => {
  scrollToBottom();
};

const addMessage = async (value: any) => {
  const newMessage = chatStore.createNewMessage(value, MessageRole.user)
  await chatStore.onSendMessage(newMessage);
  scrollToBottom();
};

// 滚动容器
const scrollContainer = ref<HTMLElement | null>(null);
const scrollToBottom = () => {
  nextTick(() => {
    if (scrollContainer.value) {
      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
    }
  });
};

getMessages();
</script>

<style scoped lang="scss">
.wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.header {
  line-height: 60px;
  border-bottom: 1px solid #f5f5f5;
  color: #333;
  font-weight: 500;
  padding: 0 24px;
}

.scroll {
  flex: 1;
  overflow: auto;
  padding: 24px;
}
.clear-context {
  margin: 20px 0 0 0;
  padding: 4px 0;

  border-top: var(--border-in-light);
  border-bottom: var(--border-in-light);
  box-shadow: var(--card-shadow) inset;

  display: flex;
  justify-content: center;
  align-items: center;

  color: var(--black);
  transition: all ease 0.3s;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  font-size: 12px;

  animation: slide-in ease 0.3s;

  $linear: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0)
  );
  mask-image: $linear;

  @mixin show {
    transform: translateY(0);
    position: relative;
    transition: all ease 0.3s;
    opacity: 1;
  }

  @mixin hide {
    transform: translateY(-50%);
    position: absolute;
    transition: all ease 0.1s;
    opacity: 0;
  }

  &-tips {
    @include show;
    opacity: 0.5;
  }

  &-revert-btn {
    @include hide;
  }

  &:hover {
    opacity: 1;

    .clear-context-tips {
      // @include hide;
    }

    .clear-context-revert-btn {
      @include show;
    }
  }
}
</style>
